<template>
  <div class="container">
    <div class="select">
      <el-select
        v-model="selectdClassId"
        placeholder="所有班级"
        @change="findExperiment"
      >
        <el-option
          v-for="item in allClass"
          :key="item.id"
          :value="item.id"
          :label="item.className"
        ></el-option>
      </el-select>
      <el-popconfirm icon="el-icon-info" icon-color="red" title="确定刷新成绩单吗？" @confirm="() => refresh()">
              <el-button type="primary" class="btn" slot="reference" size="mini">刷新成绩单</el-button>
            </el-popconfirm>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <template slot="empty">
        <span>暂无数据，请选择班级查看成绩~~~</span>
      </template>
      <el-table-column
        v-for="(item, index) of columnList2"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :min-width="item.minWidth"
        fixed
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) of experimentList"
        :key="item.id"
        align="center"
        :label="item.name"
        :min-width="item.minWidth"
        fixed
      >
        <template v-slot="{ row }">
          <el-button
            @click="jump(row.userId, row.userName, row.experimentScore[index])"
          >
            {{ row.experimentScore[index].passNum }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { findByTeacherId } from "@/api/class";
import { getExperimentScoreByteacherIdAndClassId,refreshExperimentScoreByteacherIdAndClassId  } from "@/api/viewResults";

import { columnList2 } from "./config/viewResultsForm";

export default {
  name: "viewResultExperiment",
  props: {
    placeholder: {
      type: String,
      default: "请输入班级ID进行搜索"
    }
  },
  data() {
    return {
      visible: false,
      studentClass: "",
      selectdClassId: null,
      allClass: [],
      userInfo: {},
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      columnList2,
      experimentList: [],
      tableLoading: false,
      type: null,
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    this.findClass();
  },
  methods: {
    findClass() {
      findByTeacherId({
        teacherId: this.userInfo.userId
      })
        .then(res => {
          console.log(res);
          this.allClass = res.data;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    jump(userId, userName, problem) {
      const problemId = problem.id;
      const problemName = problem.name;
      const studentClass = this.studentClass;
      this.$router.push({
        path: "/main/testModule/viewDetail",
        query: { userId, userName, studentClass, problemName, problemId }
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    //  当前页码改变事件
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getTableData();
    },
    findExperiment() {
      this.allClass.forEach(item => {
        if (item.id === this.selectdClassId) {
          this.studentClass = item.className;
        }
      });
      this.getExperimentScore();
    },
    // 获取表格数据
    getTableData() {
      this.tableLoading = true;
      if(this.type == 1) {
        refreshExperimentScoreByteacherIdAndClassId({
        teacherId: this.userInfo.userId,
        classId: this.selectdClassId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
        .then(res => {
          console.log(res);
          this.tableData = res.data;
          this.experimentList = res.data[0].experimentScore;
          this.total = res.total;
        })
        .catch(() => {
          this.$message.error("刷新实验成绩单失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
      }
      else {
        getExperimentScoreByteacherIdAndClassId({
        teacherId: this.userInfo.userId,
        classId: this.selectdClassId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
        .then(res => {
          console.log(res);
          this.tableData = res.data;
          this.experimentList = res.data[0].experimentScore;
          this.total = res.total;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
      }
    },

    // 获取实验成绩表
    getExperimentScore() {
      this.type = 0;
      console.log(this.type,"type");
      this.pageNum = 1;
      this.getTableData();
    },
    //刷新
    refresh() {
      this.type = 1;
      console.log(this.type,"type");
      this.pageNum = 1;
      this.getTableData();
    },
    
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}
.select {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 15px;
  .el-select {
    height: 35px;
    margin-right: 20px;
  }
  .btn {
    border-radius:20px;
    margin-left:10px;
}
  /deep/ .el-input__inner {
    width: 280px;
    height: 35px;
    line-height: 35px;
    border-radius: 22px;
  }
  /deep/ .el-input__icon {
    line-height: 35px;
  }
  .el-icon-search {
    line-height: 35px;
    padding-left: 10px;
    color: #5b8bff;
    font-weight: bold;
  }
}

.selectTitle {
  font-size: 15px;
  color: #909399;
  font-weight: bold;
}

.el-table {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}

/deep/ .el-table .el-table__fixed {
  height: auto !important;
  bottom: 0px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  opacity: 0;
  width: 0px;
  height: 0px;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  width: 0px;
  height: 0px;
  background: #eee;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  width: 0px;
  height: 0px;
  // border-radius: 2px;
  // background: rgba(0, 0, 0, 0.4);
}
// /deep/ .el-table__body-wrapper.is-scrolling-left {
//   position: relative;
//   overflow: hidden;
// }

// /deep/ .el-table__fixed {
//   position: absolute;
//   bottom: 0;
// }

// /deep/ .el-table__body {
//   position: absolute;
//   height: 100%;
// }

.content {
  width: 100%;
  margin-top: 10px;
  margin-left: 0%;
}

.title {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 30px;
  font-weight: bold;
}

i {
  font-size: 15px;
}

.el-icon-success {
  color: rgb(2, 206, 36);
}

.el-icon-error {
  color: rgb(255, 27, 27);
}

.el-pagination {
  margin-top: 20px;
  font: 20px;
  height: 100px;
}
</style>
